<template>
    <div class="orderListRuleForm">
        <panle title='推广链接' content="推广链接"></panle>
        <el-form :inline="true" ref="form" :model="form" label-width="100px" class="demo-form-inline">
            <el-form-item label="唯一识别码:" prop="link_yard">
                <el-input size="mini" placeholder="请输入" v-model="form.link_yard"></el-input>
            </el-form-item>
            <el-form-item label="商品名称:" prop="goods_name">
                <el-input size="mini" placeholder="请输入" v-model="form.goods_name"></el-input>
            </el-form-item>
            <el-form-item label="状态:" prop="link_status">
                <el-select v-model="form.link_status" placeholder="请选择" size="mini">
                    <el-option label="上架" value="1"></el-option>
                    <el-option label="下架" value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="mini">搜索</el-button>
                <el-button @click="resetForm('form')" size="mini">重置</el-button>
                <el-button size="mini" @click="init()">刷新</el-button>
            </el-form-item>
            <el-button class="create_link" type="primary" size="mini" @click="createdPopuLink">创建</el-button>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="自主推广链接" name="autonomy">
                <div class="table-wrap">
                    <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="name" label="商品名称"></el-table-column>
                        <el-table-column prop="img" label="缩略图">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="link_yard" label="唯一识别码"></el-table-column>
                        <el-table-column prop="goods_quantity" label="商品数量"></el-table-column>
                        <el-table-column prop="remaining_quantity" label="剩余数量"></el-table-column>
                        <el-table-column prop="link_price" label="商品价格（单位元）"></el-table-column>
                        <el-table-column prop="link_divide_price" label="佣金（单位元）"></el-table-column>
                        <el-table-column prop="link_level" label="级别">
                            <template slot-scope="scope">
                                <span v-if="scope.row.link_level == 1">一级</span>
                                <span v-else>二级</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="link_status" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.link_status == 1">上架</span>
                                <span v-else>下架</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_name" label="创建人"></el-table-column>
                        <el-table-column prop="add_time" label="创建时间"></el-table-column>
                        <el-table-column prop="id" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" label="查看" icon="fa  fa-pencil" @click="checkPopu(scope.row)">查看</el-button>
                                <el-button type="text" size="mini" label="编辑" icon="fa  fa-pencil" @click="editPopu(scope.row)">编辑</el-button>
                                <el-button type="text" size="mini" label="补货" icon="fa  fa-pencil" @click="replenish(scope.row)">补货</el-button>
                                <el-button type="text" size="mini" v-if="scope.row.link_status == 0" icon="fa  fa-pencil" @click="toggleStatus(scope.row)">上架</el-button>
                                <el-button type="text" size="mini" v-if="scope.row.link_status == 1" icon="fa  fa-pencil" @click="toggleStatus(scope.row)">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handlePopuSizeChange" @current-change="handlePopuCurrentChange"
                                       :current-page="form.pagePopuNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="form.pagePopuSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="form.popuTotal">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="继承推广链接" name="inherit">
                <div class="table-wrap">
                    <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="name" label="商品名称"></el-table-column>
                        <el-table-column prop="img" label="缩略图">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="link_yard" label="唯一识别码"></el-table-column>
                        <el-table-column prop="goods_quantity" label="商品数量"></el-table-column>
                        <el-table-column prop="remaining_quantity" label="已售数量"></el-table-column>
                        <el-table-column prop="link_price" label="商品价格（单位元）"></el-table-column>
                        <el-table-column prop="link_divide_price" label="佣金（单位元）"></el-table-column>
                        <el-table-column prop="link_level" label="级别">
                            <template slot-scope="scope">
                                <span v-if="scope.row.link_level == 1">一级</span>
                                <span v-else>二级</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="link_status" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.link_status == 1">上架</span>
                                <span v-else>下架</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_name" label="创建人"></el-table-column>
                        <el-table-column prop="add_time" label="创建时间"></el-table-column>
                        <el-table-column prop="id" label="操作">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" label="" icon="fa  fa-pencil" @click="checkPopu(scope.row)">查看</el-button>
                                <el-button type="text" size="mini" label="" icon="fa  fa-pencil" @click="editPopu(scope.row)">编辑</el-button>
                                <el-button type="text" size="mini" label="" icon="fa  fa-pencil" @click="replenish(scope.row)">补货</el-button>
                                <el-button type="text" size="mini" v-if="scope.row.link_status == 0" icon="fa  fa-pencil" @click="toggleStatus(scope.row)">上架</el-button>
                                <el-button type="text" size="mini" v-if="scope.row.link_status == 1" icon="fa  fa-pencil" @click="toggleStatus(scope.row)">下架</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handlePopuSizeChange" @current-change="handlePopuCurrentChange"
                                       :current-page="form.pagePopuNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="form.pagePopuSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="form.popuTotal">
                        </el-pagination>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible.sync="replenishOpen" :before-close="handleClose" width="1000px" append-to-body title="补货">
            <el-form ref="replenishForm" :model="replenishForm">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="库存数量：" prop="quantity">
                            <el-input size="mini" class="w60" v-model="replenishForm.quantity"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="subreplenishForm('replenishForm') " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="popuOpen" :before-close="handleClose" width="1000px" append-to-body :title="!resForm.id ? '创建推广链接' : '修改推广链接'">
            <el-form ref="resForm" :model="resForm">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="添加商品：" prop="goods_id">
                            <el-button type="primary" size="mini" v-if="!resForm.id" @click="selectGoods">添加商品</el-button>
                        </el-form-item>
                        <el-table :data="currentGoods" style="width: 100%;margin-bottom: 20px;" border stripe default-expand-all v-if="currentGoodsShow == true && !resForm.id">
                            <el-table-column prop="name" label="商品名称"></el-table-column>
                            <el-table-column prop="desc" label="商品描述"></el-table-column>
                            <el-table-column prop="img" label="缩略图">
                                <template slot-scope="scope">
                                    <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">实体</span>
                                    <span v-else>虚拟</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="售价（单位元）"></el-table-column>
                            <el-table-column prop="commission" label="佣金（单位元）"></el-table-column>
                        </el-table>
                        <el-table :data="checkPopuData.goods_data" v-if="resForm.id" style="width: 100%;margin-bottom: 20px;" border stripe default-expand-all>
                            <el-table-column prop="name" label="商品名称"></el-table-column>
                            <el-table-column prop="desc" label="商品描述"></el-table-column>
                            <el-table-column prop="img" label="缩略图">
                                <template slot-scope="scope">
                                    <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">实体</span>
                                    <span v-else>虚拟</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="售价（单位元）"></el-table-column>
                            <el-table-column prop="commission" label="佣金（单位元）"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="库存数量：" prop="goods_quantity">
                            <el-input size="mini" class="w60" v-model="resForm.goods_quantity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="设置分佣：">
                            <div class="divide">
                                <div v-if="this.userInfo.uid == 1">
                                    <el-form-item label="一级推广员佣金:" prop="link_divide_price">
                                        <el-input class="w60" size="mini" v-model="resForm.link_divide_price"></el-input>
                                    </el-form-item>
                                </div>
                                <div v-else>
                                    <el-form-item label="二级推广员佣金:" prop="link_divide_price">
                                        <el-input class="w60" size="mini" v-model="resForm.link_divide_price"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-dialog :visible.sync="goodsOpen" width="1000px" append-to-body title="选择商品">
                <el-form :inline="true" ref="goodsForm" :model="goodsForm" label-width="100px" class="demo-form-inline">
                    <el-form-item label="商品名称:" prop="goods_name">
                        <el-input size="mini" placeholder="请输入" v-model="goodsForm.goods_name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="search" size="mini">搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="table-wrap">
                    <el-table :data="tableGoodsData" v-loading="loading" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                        <el-table-column prop="name" label="商品名称"></el-table-column>
                        <el-table-column prop="img" label="缩略图">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="类型">
                            <template slot-scope="scope">
                                <span v-if="scope.row.type == 1">实体</span>
                                <span v-else>虚拟</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="desc" label="商品描述"></el-table-column>
                        <el-table-column prop="price" label="售价（单位元）"></el-table-column>
                        <el-table-column prop="commission" label="佣金（单位元）"></el-table-column>
                        <el-table-column prop="status" label="状态">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 1">上架</span>
                                <span v-else>下架</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="操作">
                            <template slot-scope="scope">
                                <el-button v-if="selectGoodsItem.id != scope.row.id" type="text" size="mini" icon="fa  fa-pencil" @click="selectGoodsData(scope.row)">添加商品</el-button>
                                <el-button v-if="selectGoodsItem.id == scope.row.id" type="text" size="mini" icon="fa  fa-pencil" @click="cancelSlect(scope.row)">取消选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleGoodsSizeChange" @current-change="handleGoodsCurrentChange"
                                       :current-page="goodsForm.pageGoodsNumber" :page-sizes="[10, 50, 100, 200]"
                                       :page-size="goodsForm.pageGoodsSize"
                                       background layout="total, sizes, prev, pager, next, jumper"
                                       :total="goodsForm.goodsTotal">
                        </el-pagination>
                    </div>
                </div>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleClose" size="small">取 消</el-button>
                <el-button type="primary" @click="!resForm.id ? submitForm('resForm') : subEditForm('resForm') " size="small">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog :visible.sync="checkPopuOpen" :before-close="handleClose" v-loading="loading" width="1000px" append-to-body title="查看推广链接">
            <el-form ref="resForm" :model="resForm">
                <el-row>
                    <el-col :span="14">
                        <el-form-item label="添加商品："></el-form-item>
                        <el-table :data="checkPopuData.goods_data" style="width: 100%;margin-bottom: 20px;" border stripe default-expand-all>
                            <el-table-column prop="name" label="商品名称"></el-table-column>
                            <el-table-column prop="desc" label="商品描述"></el-table-column>
                            <el-table-column prop="img" label="缩略图">
                                <template slot-scope="scope">
                                    <el-image :src="scope.row.img" fit="fill" style="width: 60px;height: 60px;"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column prop="type" label="类型">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">实体</span>
                                    <span v-else>虚拟</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" label="售价（单位元）"></el-table-column>
                            <el-table-column prop="commission" label="佣金（单位元）"></el-table-column>
                        </el-table>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="库存数量：" prop="goods_quantity">
                            <el-input :disabled="true" size="mini" class="w60" v-model="checkPopuData.goods_quantity"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="设置分佣：">
                            <div class="divide">
                                <div v-if="this.userInfo.uid == 1">
                                    <el-form-item label="一级推广员佣金:" prop="link_divide_price">
                                        <el-input :disabled="true" class="w60" size="mini" v-model="checkPopuData.link_divide_price"></el-input>
                                    </el-form-item>
                                </div>
                                <div v-else>
                                    <el-form-item label="二级推广员佣金:" prop="link_divide_price">
                                        <el-input :disabled="true" class="w60" size="mini" v-model="checkPopuData.link_divide_price"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16" v-if="checkPopuData.is_popu != 1">
                        <el-form-item label="二维码：">
                            <el-image :src="checkPopuData.popu_link_qrcode" fit="fill" style="width: 200px;height: 200px;"></el-image>
                            <el-button style="margin-left: 15px" type="text" size="mini" @click="downloadQrcode(checkPopuData.popu_link_qrcode)">下载</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {
    getGoodsList,
    getList,
    createPopuLink,
    checkPopuLink,
    editePopuLink,
    replenish, editeLinkStatus, getInheritList
} from "@/api/sell/popu/popu";

import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import {hasPermission, isShow} from '@/common/permission';
import {mapState} from "vuex";

export default {
    name:'Popu-Link',
    components: {
        Panle,
        PersButton,
    },
    computed:{
        ...mapState({
            userInfo: state => state.member.userInfo,
        }),
    },
    data() {
        return {
            activeName: 'autonomy',
            popuOpen: false, //创建/编辑弹框是否显示
            goodsOpen:false,//选择商品弹框是否显示
            loading:false,//加载
            currentGoodsShow:false,
            checkPopuOpen:false,
            tableData: [], //推广链接列表
            tableGoodsData: [], //商品列表
            selectGoodsItem:[], //选中的商品
            currentGoods:[],//选中的商品信息
            checkPopuData:[], //查看推广链接的数据
            replenishOpen:false, //补货是否显示
            form: {
                link_yard:'',
                goods_name:'',
                link_status:'',
                pagePopuSize: 10,
                pagePopuNumber: 1,
                popuTotal: 0,

            },
            goodsForm:{
                goods_name:'',
                pageGoodsSize: 10,
                pageGoodsNumber: 1,
                goodsTotal: 0,
            },
            resForm: {
                "proportion":0,
                "goods_quantity":0,
                "link_divide_price":0,
                "id":''
            },
            replenishForm:{
                'quantity':0, //补货数量
                'id':''
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        hasPermission,
        isShow,
        handleClick(tab) {
            if(tab.name == 'inherit'){
                this.initInheritList();
            }else{
                this.init();
            }
        },
        init() {
            this.loading = true;
            getList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.popuTotal = res.data.total;
                this.loading = false;
            })
        },
        //获取继承推广链接列表
        initInheritList(){
            this.loading = true;
            getInheritList(this.form).then((res) => {
                this.tableData = res.data.data;
                this.form.popuTotal = res.data.total;
                this.loading = false;
            })
        },

        //添加或者编辑完成后初始化弹框的内容
        initPopu(){
            this.selectGoodsItem = [];
            this.currentGoods = [];
            this.resForm.proportion = 0;
            this.resForm.goods_quantity = 0;
            this.resForm.link_divide_price = 0;
            this.currentGoodsShow = false;
            this.radio = '1';
            this.resForm.id = '';
            this.replenishForm.quantity = 0
            this.replenishForm.id = ''
        },

        //关闭弹框回调
        handleClose(){
            this.popuOpen = false;
            this.checkPopuOpen = false;
            this.replenishOpen = false;
            this.initPopu();
        },

        search: function () {
            this.loading = true;
            this.form.pagePopuSize = 10;
            this.form.pagePopuNumber = 1;
            if(this.activeName == 'autonomy'){
                this.init();
            }else{
                this.initInheritList();
            }
        },
        handlePopuSizeChange: function (e) {
            this.form.pagePopuSize = e;
            this.init();
        },
        handlePopuCurrentChange: function (e) {
            this.form.pagePopuNumber = e;
            this.init();
        },
        handleGoodsSizeChange: function (e) {
            this.goodsForm.pageGoodsSize = e;
            this.init();
        },
        handleGoodsCurrentChange: function (e) {
            this.goodsForm.pageGoodsNumber = e;
            this.init();
        },
        resetForm(formName) {
            this.form.link_yard = ''
            this.form.goods_name = ''
            this.form.link_status = ''
            this.init();
        },
        //创建提交
        submitForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    this.resForm.goods_id = this.selectGoodsItem.id
                    this.resForm.add_id = this.userInfo.uid
                    this.resForm.link_price = this.selectGoodsItem.price
                    createPopuLink(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.popuOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },

        //编辑提交
        subEditForm:function(data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    this.resForm.add_id = this.userInfo.uid
                    this.$delete(this.resForm, 'proportion');
                    editePopuLink(this.resForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.popuOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },

        //创建推广链接
        createdPopuLink: function (e) {
            this.popuOpen = true;
        },
        //添加商品
        selectGoods: function (e) {
            this.goodsOpen = true;
            this.loading = true;
            getGoodsList(this.goodsForm).then((res) => {
                this.tableGoodsData = res.data.data;
                this.goodsForm.goodsTotal = res.data.total;
                this.loading = false;
            })
        },
        //选择商品
        selectGoodsData:function (e){
            this.selectGoodsItem = e;
            this.currentGoods = [e];
            this.goodsOpen = false;
            this.currentGoodsShow = true;
        },
        //取消选择
        cancelSlect:function (e){
            this.selectGoodsItem = [];
            this.currentGoodsShow = false;
            this.goodsOpen = false;
        },
        //查看链接
        checkPopu:function (e){
            this.loading = true;
            var param = {
                'id':e.id
            }
            checkPopuLink(param).then((res) => {
                if(res.code == 200){
                    this.checkPopuOpen = true;
                    this.checkPopuData = res.data;
                    this.loading = false;
                }
            })
        },
        //赋值链接
        copyText:async function (e) {
            await navigator.clipboard.writeText(e);
            this.msgSuccess("复制成功！");
        },
        //base64 to png
        convertBase64ToPng(base64Data, callback) {
            // 将base64字符串转换为Blob对象
            const byteCharacters = atob(base64Data.split(',')[1]);
            const mimeString = base64Data.split(',')[0].match(/:([^;]+);/)[1];
            const arrayBuffer = new ArrayBuffer(byteCharacters.length);
            const uintArray = new Uint8Array(arrayBuffer);
            for (let i = 0; i < byteCharacters.length; i++) {
                uintArray[i] = byteCharacters.charCodeAt(i);
            }
            const blob = new Blob([uintArray], { type: mimeString });
            callback(blob);
        },
        //下载二维码
        downloadQrcode:function (e){
            this.convertBase64ToPng(e,pngData => {
                var downloadLink = document.createElement('a');
                downloadLink.href = URL.createObjectURL(pngData);
                downloadLink.download = 'popu_link_qrcode.png';
                downloadLink.click();
            })
        },
        //编辑链接的数据
        editPopu:function (e){
            this.loading = true;
            this.resForm.id = e.id;
            var param = {
                'id':e.id
            }
            checkPopuLink(param).then((res) => {
                if(res.code == 200){
                    this.popuOpen = true;
                    this.checkPopuData = res.data;
                    this.resForm.goods_quantity = res.data.goods_quantity
                    this.resForm.link_divide_price = res.data.link_divide_price
                    this.resForm.goods_id = res.data.goods_id
                    this.loading = false;
                }
            })
        },
        //补货弹框显示
        replenish:function (e){
            this.replenishOpen = true;
            this.replenishForm.id = e.id;
        },
        subreplenishForm:function (data){
            this.$refs[data].validate((valid) => {
                if (valid) {
                    this.replenishForm.uid = this.userInfo.uid
                    replenish(this.replenishForm).then((res)=>{
                        if(res.code==200){
                            this.msgSuccess(res.msg);
                            this.replenishOpen=false;
                            this.init();
                            this.initPopu();
                        }else{
                            this.msgError(res.msg);
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        //改变状态
        toggleStatus:function(e) {
            var params = {
                "id":e.id,
                'link_status':e.link_status == 1 ? 0 : 1,
                'uid':this.userInfo.uid
            }
            editeLinkStatus(params).then((res)=>{
                if(res.code==200){
                    this.msgSuccess(res.msg);
                    this.init();
                }else{
                    this.msgError(res.msg);
                }
            })
        }
    }
}

</script>

<style lang="scss" scoped>
.demo-form-inline {
    margin: 20px;

    .el-form-item {
        margin-bottom: 0;
    }
}
.el-form--inline .el-form-item {
    display: inline-block;
    vertical-align: top;
}

.orderListRuleForm .el-form-item {
    margin-bottom: 0;
}

.search-content {
    width: 100%;
    margin: 20px;
}

.create_link{
    margin-top: 7px;
    float: right;
}

.w50{
    width: 50px !important;
}
.w60{
    width: 60px !important;
}
.mr20{
    margin-right: 20px;
}
</style>
